<div class="f-utils-fill-flex-column h-100 methodPanel">
  <div class="varible-toolbar">
    <div class="toolbar-item" (click)="onAddElement()">
      <div class="toolbar-item-icon toolbar-item-icon-add"></div>
      <span class="toolbar-item-text">添加变量</span>
    </div>
    <div class="toolbar-item-spilter"></div>
    <div class="toolbar-item" (click)="onDeleteElement()">
      <div class="toolbar-item-icon toolbar-item-icon-delete"></div>
      <span class="toolbar-item-text">删除变量</span>
    </div>
    <div class="toolbar-item-spilter"></div>
    <div class="toolbar-item" (click)="onRefresh()">
      <div class="toolbar-item-icon toolbar-item-icon-refresh"></div>
      <span class="toolbar-item-text">刷新</span>
    </div>
  </div>
  <div class="f-utils-fill border" style="border-radius: 8px;">
    <farris-datagrid #dg [columns]="columns" [data]="variableList" idField="hId" [pagination]="false" [fit]="true"
      [fitColumns]="true" [editable]="true" [editMode]="'cell'" [showLineNumber]="true" [showCheckbox]="true"
      [showAllCheckbox]="showAllCheckbox" [multiSelect]="true" [disableRow]="disableRowFn" [afterEdit]="afterGridEdit"
      (endEdit)="endEdit($event)">
    </farris-datagrid>
  </div>
</div>

<ng-template #opCell let-ctx>
  <div class="cell-wrapper">
    <span>{{format(ctx)}}</span>
    <ng-container *ngIf="ctx.rowData.category==='locale'">
      <span class="f-icon f-icon-drop-down_line" *ngIf="ctx.field ==='type'"></span>
      <span class="f-icon f-icon-edit-cardview" *ngIf="ctx.field ==='code'||ctx.field ==='name'"></span>
    </ng-container>
  </div>
</ng-template>